<template>
  <div>
    <div class="dashboard-container">
      
      <div class="big-back-box">
        <div class="top">合同列表</div>
      <div style="height: 20px"></div>

        <el-card class="box-card" style="margin: 0 auto">

          <!-- 条件搜索 -->
          <div style="height: 20px; color: #409eff; line-height: 20px">
            分类查询
          </div>
          <br />
          <el-form :inline="true" class="demo-form-inline">
    
            <el-select v-model="searchType" placeholder="请选择">
              <el-option
                v-for="item in chooseList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-form-item style="margin-left:10px">
              <el-button type="primary" @click="searchByType">查询</el-button>
            </el-form-item>
          </el-form>
          <!-- 列表 -->
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column label="名称" align="center" width="150">
              <template slot-scope="{ row }">
                <span>{{ row.name }}</span>          
              </template>
            </el-table-column>
            <el-table-column label="类型" align="center" width="100">
              <template slot-scope="{ row }">
                <span>{{ row.type }}</span>          
              </template>
            </el-table-column>
              <el-table-column label="图片">
               <template slot-scope="{row}">
                <el-image 
                  style="width: 100px; height: 100px"
                  :src="row.picture"
                  :preview-src-list="[row.picture]"
                >
                </el-image>
               </template>
              </el-table-column>
              <el-table-column label="合同描述" align="center" width="400">
              <template slot-scope="{ row }">
                <span>{{ row.represent }}</span>          
              </template>
            </el-table-column>  
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="{ row }">
                 <el-link type="primary" :href="row.content" target="_blank" >下载</el-link>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <pagination
            :total="total"
            :page.sync="listQuery.pageNum"
            :limit.sync="listQuery.pageSize"
            page-sizes=[5,10]	
            @pagination="getList"
          />
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
// 分页功能
import Pagination from "@/components/Pagination";
// 获取合同表
import { getContractList } from "@/api/legalDoc.js";
// 通过合同名获取合同表
import { getContractByName } from "@/api/legalDoc.js";
// 通过合同类型获取合同表
import { getContractListByType } from "@/api/legalDoc.js";
//获取已上架的合同表
import {getContractListOnShelves} from "@/api/legalDoc.js";
export default {
  components: { Pagination }, // 分页
  data() {
    return {
      // 分页
      total: 0,
      listQuery: {
        pageNum: 1,
        pageSize: 5,
      },
      // 搜索
      searchName: "",
      searchType: "",
      // 选择器下拉选项
      chooseList: [
        {
          value: "买卖合同",
          label: "买卖合同",
        },
        {
          value: "赠与合同",
          label: "赠与合同",
        },
        {
          value: "借款合同",
          label: "借款合同",
        },
        {
          value: "保证合同",
          label: "保证合同",
        },
        {
          value: "租赁合同",
          label: "租赁合同",
        },
      ],
      // value: "",
      // 通知列表
      tableData: [],
    };
  },
  // 调用初始化，一进页面就执行。
  mounted() {
    // alert("mounted()");
    console.log("mounted()");
    this.init();
  },
  methods: {
    // 初始化
    init() {
      getContractListOnShelves(this.listQuery,this.searchType).then((resp) => {
        this.total=resp.data.contractList.totalSize;
        this.tableData = resp.data.contractList.content;
      });
    },
    // 分页
    getList(pageObj) {
      console.log(pageObj);
      // 获取数据
      this.listQuery.pageNum=pageObj.page;
      this.listQuery.pageSize=pageObj.limit;
      this.init();
    },
    // 根据合同名称查询
    searchByName() {
      let dataKeyWord = {
        name: this.searchName,
      };
      getContractByName(dataKeyWord).then((resp) => {
        console.log("getContractByName()");
        console.log(resp);
        console.log(resp.data.contractList);
        this.tableData = resp.data.contractList;
      });
    },
    // 根据合同种类查询
    searchByType() {
      let dataType = {
        type: this.searchType
      };
      getContractListByType(dataType).then((resp) => {
        console.log("resp:" + resp);
        console.log(
          "resp.data.contractList:" +
            resp.data.contractList
        );
        this.tableData = resp.data.contractList;
        this.total=resp.data.contractList.length;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
// 页头LOGO
.top {
  height: 50px;
  font-size: 30px;
  text-align: center;
  line-height: 50px;
}

// 大盒子
.big-back-box {
  width: 800px;
  margin: 0 auto;
}

// 原框架自带
.dashboard {
  &-container {
    margin-top: 30px;
    // margin-left: 30px;
    // margin-right: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>